<tc_include file="Public:head" />
<style>
#qrcode img{
    margin: auto;
}
</style>
<body ontouchstart style="background: #3c3c3c;">
<div class="container" id="container">
    <div class="page">
        <div class="page__bd" style="height: 100%; overflow: hidden;">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <!--card info-->
                    <article class="weui-article text-center" style="padding: 30px;">
                        <section>
                            <p>
                                <img src="<php>echo '/'.C('UPLOADPATH').$coupon['card_img']</php>" />
                            </p>
                            <a href="javascript:;" class="weui-btn weui-btn_orange" id="useBtn">立即使用</a>
                            <p class="text-gray">
                                请点击出示二维码使用
                            </p>
                        </section>
                    </article>
                    <!--card info end-->
                    <!--list-->
                    <div class="weui-article">
                        {$coupon['description']|htmlspecialchars_decode}
                    </div>
                    <!--list end-->
                </div>
                <tc_include file="Public:menu" />
            </div>
        </div>
    </div>
</div>

<div id="dialogs">
    <!--BEGIN regDialog-->
    <div class="js_dialog" id="regDialog" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog notice-dialog">
            <div class="weui-dialog__btn">&times;</div>
            <div class="weui-dialog__bd" style="margin-top: 20px;">
                <div class="weui-dialog__title">{$coupon['code_show']}</div>
                <p><div id="qrcode" style="text-align: center;"></div></p>
                <p class="copy">请将屏幕调至高亮状态进行扫码</p>
            </div>
        </div>
    </div>
    <!--END regDialog-->
</div>
<tc_include file="Public:footer"/>
<script src="__TMPL__Public/assets/js/qrcode.min.js"></script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        roundLengths : true, //防止文字模糊
        autoplay : 2000
    });
    //使用
    $('#useBtn').on('click', function(){
        $('#regDialog').fadeIn(0);
    });
    //关闭dialogs
    $('#dialogs').on('click', '.weui-dialog__btn', function(){
        $(this).parents('.js_dialog').fadeOut(0);
    });

    $(function () {
        var qrcode = new QRCode("qrcode", {
            text: "{$coupon['code']}",
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    });



</script>
</body>
</html>
